<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head th:replace="fragments/head :: head"></head>

<body>
<!-- Wrapper -->
<div id="wrapper">
	<!-- Sidebar -->
	<div id="sidebar-wrapper" th:replace="fragments/nav :: nav"></div>
	<!-- #Sidebar -->

	<!-- Page Content -->
	<div id="page-content-wrapper">
		<div class="container-fluid">
			<div class="row">
				<div class="col-lg-12">
					<h1 th:text="${title}">TITLE</h1>
					<div th:if="${error != null}" th:text="${error}" class="alert alert-danger" role="alert">Error message</div>
					<form id="clusterForm" method='post'>
						<fieldset>
							<div class="form-group">
								<label class="control-label" for="clusterId">Cluster Id:</label>
								<div>
									<input id="clusterId" name="clusterId" type="text"
									       class="form-control input-md" size="25" required="true"
									       disabled="true" th:value="${cluster.getClusterId()}" />
								</div>
							</div>
							<div class="form-group">
								<label class="control-label" for="clusterName">Cluster Name:</label>
								<div>
									<input id="clusterName" name="clusterName" type="text"
									       class="form-control input-md" size="25" required="true"
									       th:value="${cluster.getClusterName()}" />
								</div>
							</div>
							<div class="form-group">
								<label class="control-label" for="clusterDescription">Description:</label>
								<div>
									<input id="clusterDescription" name="clusterDescription" type="text"
									       class="form-control input-md" rows="2" cols="200"
									       th:value="${cluster.getClusterDescription()}" />
								</div>
							</div>
							<div class="form-group">
								<label class="control-label" for="sslAuth">mTLS Authentication:</label>
								<div id="sslAuth">
									<input type="checkbox" class="form-check-input" id="sslAuthCheck" name="sslAuthCheck" onclick="onSSLEnabled()" />
									<label class="control-label" for="sslAuthCheck">Enable</label>
								</div>
							</div>
							<div class="form-group" id="principalNameDiv" name="principalNameDiv" hidden="true">
								<label class="control-label" for="principalNameInputDiv">TLS Principal name (optional):</label>
								<div id="principalNameInputDiv">
									<input id="principalName" name="principalName" type="text"
										   placeholder="Enter the value of TLS principal (should be part of the name of the key/cert files)" class="form-control input-md"
										   size="25" th:value="${cluster.getPrincipalName()}" />
								</div>
							</div>
							<div class="form-group">
								<label class="control-label" for="brokerHost">Broker Host:</label>
								<div>
									<input id="brokerHost" name="brokerHost" type="text"
									       class="form-control input-md" size="25" required="true"
									       th:value="${cluster.getBrokerHost()}" />
								</div>
							</div>
							<div class="form-group">
								<label class="control-label" for="brokerPort">Broker Port:</label>
								<div>
									<input id="brokerPort" name="brokerPort" type="number"
									       class="form-control input-md" size="25" required="true"
									       th:value="${cluster.getBrokerPort()}" />
								</div>
							</div>
							<div class="form-group">
								<label class="control-label" for="brokerEndpoint">Broker Endpoint:</label>
								<div>
									<input id="brokerEndpoint" name="brokerEndpoint" type="text"
									       class="form-control input-md" size="25" required="true"
									       th:value="${cluster.getBrokerEndpoint()}" />
								</div>
							</div>

							<div class="form-group">
								<label class="control-label" for="hoursOfLag">Time SLA</label>
								<div>
									<input id="hoursOfLag" name="hoursOfLag" type="number"
										   class="form-control input-md" size="25" th:value="${cluster.getHoursOfLag()}"/>
								</div>
							</div>

							<div class="form-group">
								<label class="control-label" for="updateCluster">Actions:</label>
								<input id="updateCluster" class="btn btn-success" type="submit" />
								<div id="deleteCluster" class="btn btn-danger">Delete</div>
							</div>
						</fieldset>
					</form>
				</div>
			</div>
		</div>
	</div>
	<!-- #Page Content -->

	<!-- delete confirmation -->
	<div id="deleteConfirmModal" class="modal fade" role="dialog">
		<div class="modal-dialog">
			<!-- Modal content-->
			<div class="modal-content">
				<div class="modal-body">
					<p id="deleteConfirmModalCode">Delete this cluster?</p>
				</div>
				<div class="modal-footer">
					<button type="button" data-dismiss="modal" class="btn btn-primary" id="deleteConfirmModalYes">Yes</button>
					<button type="button" data-dismiss="modal" class="btn" id="deleteConfirmModalNo">No</button>
				</div>
			</div>
		</div>
	</div>
	<!-- update confirmation -->
	<div id="updateConfirmModal" class="modal fade" role="dialog">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-body">
					<p>Update this cluster?</p>
					<div id="updateConfirmModalCode">

					</div>
				</div>
				<div class="modal-footer">
					<button type="button" data-dismiss="modal" class="btn btn-primary" id="updateConfirmModalYes">Yes</button>
					<button type="button" data-dismiss="modal" class="btn" id="updateConfirmModalNo">No</button>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- #Wrapper -->

<script language="javascript" type="text/javascript" th:inline="javascript">

	$(document).ready(function() {
		if ([[${cluster.getIsSSLAuth()}]] == true) {
		    $('input[id=sslAuthCheck]', '#clusterForm').attr('checked', true);
		    $('#principalNameDiv').attr('hidden', false);
		} else {
		    $('input[id=sslAuthCheck]', '#clusterForm').attr('checked', false);
		}
	});

	$("#clusterForm").submit(function(e) {
		e.preventDefault();
		if ('[[${cluster.getHoursOfLag()}]]' !== $('#hoursOfLag').val()) {
			$.ajax({
				type: 'POST',
				url: '/Druid/UpdateCluster/AffectedJobs/' + $('#clusterId').val(),
				dataType: 'text',
				success: function (response, status, jQxhr) {
					if (status === 'success') {
						$('#updateConfirmModalCode').html(response);
						$('#updateConfirmModal').modal('show');
					} else {
						showWarningMessage('Something went wrong! Try again');
					}
				},
				error: ajaxMessage
			});
		} else {
			$('#updateConfirmModal').modal('show');
		}
	});

	$('#deleteCluster').click(function(e) {
		e.preventDefault();
		$('#deleteConfirmModalCode').html();
		$('#deleteConfirmModal').modal('show');
	});

	function onSSLEnabled() {
		if ($('#sslAuthCheck').is(':checked') == true) {
			$('#principalNameDiv').attr("hidden", false);
		} else {
			$('#principalNameDiv').attr("hidden", true);
			$('#principalName').val("");
		}
	}

	$('#deleteConfirmModalYes').click(function() {
		$.ajax({
			type: 'POST',
			url: '/Druid/DeleteCluster/' + $('#clusterId').val(),
			dataType: 'text',
			success: function (response, status, jQxhr) {
				if (status === 'success') {
					window.document.location = '/Druid/Clusters';
					showInfoMessage('Cluster deleted successfully');
				} else {
					showWarningMessage('Something went wrong! Try again');
				}
			},
			error: ajaxMessage
		});
	});

	$('#updateConfirmModalYes').click(function() {
		const data ={
			clusterName: $('#clusterName').val(),
			clusterDescription: $('#clusterDescription').val(),
			brokerHost: $('#brokerHost').val(),
			brokerPort: $('#brokerPort').val(),
			brokerEndpoint: $('#brokerEndpoint').val(),
			hoursOfLag: $('#hoursOfLag').val(),
			protocol: $('#sslAuthCheck').is(':checked') ? 'https' : 'http',
			isSSLAuth: $('#sslAuthCheck').is(':checked'),
			principalName: $('#principalName').val()
		};
		$.ajax({
			type: 'POST',
			url: '/Druid/UpdateCluster/' + $('#clusterId').val(),
			data: JSON.stringify(data),
			contentType: "application/json",
			dataType: 'text',
			success: function(response, status, jQxhr) {
				if (status === 'success') {
					window.document.location = '/Druid/Clusters';
					showInfoMessage('Cluster updated successfully');
				} else {
					showWarningMessage('Something went wrong! Try again');
				}
			},
			error: ajaxMessage
		});
	});

	$('form input[type=submit]').click(function() {
		$('input[type=submit]', $(this).parents('form')).removeAttr('clicked');
		$(this).attr('clicked', 'true');
	});

	$('#deleteConfirmModalNo').click(function() {
		showWarningMessage('Cluster was not delete');
	});

	$('#updateConfirmModalNo').click(function() {
		showWarningMessage('Cluster was not updated');
	});

</script>

</body>

</html>
